<template>
  <view class="notice">
    <screen :list="times" :current="current" @event-game-change="onGameChange" @event-nav-change="onNavChange"></screen>
    <scroll-view scroll-y="" class="scroll-view" @scrolltolower="onScrollTolower">
      <view @tap="go('/pages/video/moreGameType?id=' + item.id)" class="scroll-view-item" v-for="(item, index) in lists" :key="index">
        <match-item
          :match-id="item.id"
          :is-followed.sync="item.isFav"
          :follow-total.sync="item.favNum"
          :game-logo="item.gameIcon"
          :match-name="item.matchName"
          :match-time="item.beginTime"
          :teamAName="item.teamAName"
          :team-a-logo="item.teamAIcon"
          :teamBLogo="item.teamBIcon"
          :teamBName="item.teamBName"
        ></match-item>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import screen from "./screen";
import matchItem from "./matchItem";
import uniApp from "@/utils/uni-app";
let page = 1,
  size = 10;
export default {
  components: {
    screen,
    matchItem
  },
  data() {
    return {
      times: ["今天", "明天"],
      current: 0,
      gameId: 0,
      lists: [],
      total:0
    };
  },
  mounted() {
    uni.$on("notice_onPullDownRefresh", this.loadData);
  },
  destroyed() {
    uni.$off("notice_onPullDownRefresh", this.loadData);
  },
  methods: {
    loadData(init = true) {
      if(init){
        page= 1;
        this.lists = [];
        this.total = 0;
      }
      return this.$api.video.getMatches(this.current, this.gameId, page, size).then(response => {
        this.total = response.total;
        this.lists = [...this.lists, ...response.list];
        uni.$emit("video_stopPullDownRefresh");
        return response;
      });
    },
    onNavChange(index) {
      this.current = index;
      this.loadData(true);
    },
    onGameChange(info) {
      this.gameId = info.id;
      this.loadData(true);
    },
    onFollow(index) {
      this.$api.video
        .postFollowMatch(this.lists[index].id)
        .then(_ => {
          uniApp.toast(_.data.msg || "执行成功");
        })
        .catch(e => {
          uniApp.alert(e.data.msg || "收藏失败");
        });
    },
    onScrollTolower(){
      if(this.lists.length >= this.total) return;
      page++;
      this.loadData(false);
    }
  }
};
</script>
<style lang="scss" scoped>
.notice {
  height: 100%;
  background-color: #ffffff;
}
.scroll-view {
  height: calc(100% - 60rpx);
}
.scroll-view-item {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}
</style>
